How to Integrate Device Features in MDriven Apps Using the Navigator API

Want to integrate powerful device features like camera access, geolocation and sensors into your MDriven app?

The Navigator API makes it easy.

The JavaScript Navigator API provides information about the browser and device environment. It is particularly useful for detecting device capabilities, user preferences and other browser related details.

The Navigator API grants access to various device capabilities including:

  • Geolocation - Determining the user's geographical location.
  • Network information - providing details about the user's network connection.
  • Media Devices - accessing the device's camera and microphone.
  • Vibration - enabling haptic feedback.
  • Bluetooth - communicating with nearby Bluetooth devices.
  • Battery Status - obtaining information about the device's battery level.

The device capabilities above can be integrated into your MDriven App using the EXT_Components feature. This MDriven feature enables JavaScript integration into your app, allowing you to leverage the Navigator API features for capturing device and browser data and saving it in your app.

For example, with the Navigator API, you can take pictures from a device camera and save them in your app using an EXT_Component (Angular JS Component).

How to Implement the Navigator API in MDriven

  1. Create an Ext_Component
  2. Within the component:
    • Check for API availability in the user's browser or device
    • Use Javascript functions to call camera, GPS or other APIs
    • Handle permissions securely for a smooth user flow

Why Use the Navigator API in MDriven?

  1. Seamless Integration: Easily connect device hardware with your MDriven model.
  2. Cross-Platform Compatibility: Works across browsers and mobile devices.
  3. Improved User Experience: Enable native features without complex coding.

NavigatorThings App Model

This model demonstrates how to access the different device capabilities using the Navigator API and Ext_Components MDriven Feature.

This model is accessible from the TK Live View or Github.

App Components

  • TakePicture Component - This component is for taking a picture using your device camera and saving it in your app. This components uses navigator.mediaDevices.getUserMedia
This page was edited 2 days ago on 03/25/2025. What links here